<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="page-tools">
          <!-- 左侧 -->
          <div class="left">
            <div class="btn">
              <span class="h">学科内容</span>
              <el-input
                v-model="input"
                placeholder="请输入内容"
              ></el-input>
              <div class="btn-l">
              </div>
              <el-button @click="input = ''">清空</el-button>
              <el-button
                type="primary"
                @click="hSimple"
              >搜索</el-button>
            </div>
          </div>
          <div class="right">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button
                icon="el-icon-edit"
                size="small"
                type="success"
                @click="hAdd"
              >新增学科</el-button>
            </el-row>
          </div>
        </div>
        <!-- 标签 -->
        <div class="tips">
          <i class="el-icon-info" />
          <span>数据一共{{counts}}条</span>
        </div>
        <el-tabs>
          <!-- 表格 -->
          <el-table :data='list'>
            <el-table-column
              label="序号"
              type="index"
            />
            <el-table-column
              label="学科名称"
              prop="subjectName"
            />
            <el-table-column
              label="创建者"
              prop="username"
            />
            <el-table-column
              label="创建日期"
              width="200"
            >
              <template slot-scope="scope">
                {{time(scope.row.addDate)}}
              </template>
            </el-table-column>
            <el-table-column
              label="前台是否显示"
              prop="isFrontDisplay"
            >
              <template slot-scope="scope">
                {{show(scope.row.isFrontDisplay)}}
              </template>
            </el-table-column>
            <el-table-column
              label="二级目录"
              prop="twoLevelDirectory"
            />
            <el-table-column
              label="标签"
              prop="tags"
            />
            <el-table-column
              label="题目数量"
              prop="totals"
            />
            <el-table-column
              label="操作"
              width="230"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="$router.push({path:'directorys',query:{id:scope.row.id,name:scope.row.subjectName}})"
                >学科分类</el-button>
                <el-button
                  type="text"
                  @click="$router.push({path:'tags',query:{id:scope.row.id,name:scope.row.subjectName}})"
                >学科标签</el-button>
                <el-button
                  type="text"
                  @click="hModify(scope.row.id)"
                >修改</el-button>
                <el-button
                  type="text"
                  @click="hDel(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <el-row
              type="flex"
              justify="left"
              align="middle"
              style="height: 60px"
            >
              <!-- 分页组件 -->
              <el-pagination
                background
                layout="prev,pager,next,sizes,jumper"
                :total="counts"
                :page-size="pageParams.pagesize"
                :page-sizes="[5 , 10, 20, 30, 40]"
                @current-change="hCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="cur_page"
              />
            </el-row>
          </div>
        </el-tabs>
      </el-card>
      <el-dialog
        :visible.sync="isShowDialog"
        :title="isEdit ? '修改学科' : '新增学科'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <subjectsAdd
          v-if='isShowDialog'
          @close="isShowDialog=false"
          @hBtn="hBtn"
          :id="id"
          :is-edit="isEdit"
        ></subjectsAdd>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects.js'
import { parseTime } from '@/utils'
import subjectsAdd from '@/module-hmmm/components/subjects-add.vue'
export default {
  components: {
    subjectsAdd
  },
  data () {
    return {
      list: [], // 从接口处取回
      pageParams: {
        pagesize: 10, // 每页显示几条
        page: 1 // 当前在第几页
      },
      counts: 0, // 数据总条数
      input: '',
      isShowDialog: false, // 控制弹窗显示隐藏
      isEdit: false, // 区别是添加还是修改
      id: null,
      cur_page: 0
    }
  },
  created () {
    this.doList()
  },
  methods: {
    async doList () { // 总数据请求
      try {
        const res = await list(this.pageParams)
        // console.log(res)
        this.list = res.data.items
        this.counts = res.data.counts
      } catch (err) {
        console.log(err)
      }
    },
    hCurrentChange (curPage) { // 翻页设置
      this.pageParams.page = curPage
      this.doList()
    },
    handleSizeChange (curPage) {
      this.pageParams.pagesize = curPage
      this.cur_page = 1
      this.pageParams.page = 1
      this.doList()
    },
    show (y) { // 前台是否显示区域内容转换
      return y === 1 ? '是' : '否'
    },
    time (t) { // 时间格式化
      return parseTime(t)
    },
    async doDel (id) { // 删除请求
      try {
        await remove({ id })
        this.$message.success('删除成功')
        if (this.list.length === 1) {
          this.pageParams.page--
          if (this.pageParams.page <= 0) {
            this.pageParams.page = 1
          }
        }
        this.doList()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    hDel (id) { // 删除功能
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 确定
          this.doDel(id)
          this.doList()
        })
        .catch(() => {
          // 取消
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    hAdd () { // 新增按钮
      this.isShowDialog = true
      this.isEdit = false
    },
    hModify (id) { // 修改
      this.isShowDialog = true
      this.isEdit = true
      this.id = id
    },
    hBtn () {
      if (this.isEdit === false) {
        this.cur_page = 1
        this.pageParams.page = 1
        this.doList()
        this.isShowDialog = false
      } else {
        this.doList()
        this.isShowDialog = false
      }
    },
    hSimple () { // 搜索按钮
      this.loadSimple()
    },
    async loadSimple () { // 搜索请求
      try {
        const res = await list({ subjectName: this.input })
        this.list = res.data.items
        this.counts = res.data.counts
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.tips {
  line-height: 34px;
  padding: 0px 15px;
  border-radius: 5px;
  // border: 1px solid rgba(145, 213, 255, 1);
  background: #f4f4f5;
  i {
    margin-right: 10px;
    color: #909399;
  }
}
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn {
    display: flex;
    margin-bottom: 20px;
    .h {
      white-space: nowrap;
      padding-top: 7px;
      padding-right: 8px;
      font-size: 20px;
    }
    .btn-l {
      margin-left: 10px;
    }
  }
}
.page {
  float: right;
}
</style>
